<template>
  <div id="app">
    <znxd-form
      ref="formBasic"
      v-model="formData"
      :formColumn="formColumnBasic"
      :initData="initData"
      :formRules="formRulesBasic"
      :formButtons="formButtons"
      @handeSave="handeSave"
      @handelCancel="handelCancel"
    >
    </znxd-form>
  </div>
</template>

<script>
export default {
  name: "form",
  data () {
    return {
      formData: {},
      initData: {
        datasourceName: "name",
        description: "desc",
        ftpPassword: "password123",
        ftpUsername: "username",
        ip: "10.10.10.10",
        port: "8888",
        protocolType: "sftp",
        status: 1
      },
      formButtons: [
        {
          label: "保存",
          type: "primary",
          handelClick: (row) => {
            this.handeSave(row)
          }
        },
        {
          label: "取消",
          plain: true,
          handelClick: () => {
            this.handelCancel()
          }
        }
      ],
      formColumnBasic: [],
      typeOptions: [
        {
          label: "sftp服务器",
          value: "sftp"
        },
        {
          label: "ftp服务器",
          value: "ftp"
        }
      ],
      enableOptions: [
        {
          label: "是",
          value: 1
        },
        {
          label: "否",
          value: 2
        }
      ],
      formRulesBasic: {
        datasourceName: [{ required: true, message: "不能为空" }],
        protocolType: [{ required: true, message: "不能为空" }],
        ip: [{ required: true, message: "不能为空" }],
        port: [{ required: true, message: "不能为空" }],
        ftpUsername: [{ required: true, message: "不能为空" }],
        ftpPassword: [{ required: true, message: "不能为空" }],
        status: [{ required: true, message: "不能为空" }]
      },
    }
  },
  methods: {
    handeSave () {
      let well = this.$refs.formBasic.validateForm()
      if (!well) return false
      console.log(this.formData)
    },
    handelCancel () {
      console.log("handelCancel")
    }
  },
  mounted () {
    this.formColumnBasic = [{
      name: "datasourceName",
      label: "文件服务器名称",
      type: "input",
      span: 12
    },
    {
      name: "protocolType",
      label: "协议类型",
      type: "select",
      options: this.typeOptions,
      span: 12
    },
    {
      name: "description",
      label: "描述",
      type: "textarea"
    },
    {
      name: "ip",
      label: "服务器IP",
      type: "input",
      span: 12
    },
    {
      name: "port",
      label: "端口号",
      type: "number",
      span: 12
    },
    {
      name: "ftpUsername",
      label: "用户名",
      type: "input",
      span: 12
    },
    {
      name: "ftpPassword",
      label: "密码",
      type: "input",
      span: 12
    },
    {
      name: "status",
      label: "是否启用",
      type: "radio",
      options: this.enableOptions,
      span: 12
    }]
  }
};
</script>
